<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="js/jquery-1.12.4.min.js"></script>
    <style>
        div {
            margin: 10px auto;
            width: 150px;
            text-align: center;
        }

        p {
            /*background-color: #F5EE13;*/
            margin-right: 10px;
            padding: 6px;
        }

        #title {
            position: absolute;
            border: 1px solid #333;
            background-color: #F7F5D1;
            padding: 1px;
            color: #333;
            display: none;
            font-size: 14px;
        }    </style>
    <script>
        //改变默认样式
        $(function () {
            var x = 5;
            var y = 10;  // x和y表示了title框与元素之间横轴和纵轴之间的距离
            $("p.title").mouseover(function (e) {
                this.myTitle = this.title; //获取默认的title
                this.title = ""; //获取后将默认的清空
                var title = "<div id='title'>" + this.myTitle + "<\/div>"; //创建新的 div 元素，在CSS样式中已定义样式
                $("#box").append(title); //把它追加到文档中
                $("#title").css({"top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px"
                }).show("fast"); //设置x坐标和y坐标，并且快速显示
            }).mouseout(function () {
                this.title = this.myTitle;
                $("#title").remove(); //光标离开时移除
            })
        })

    </script>
</head>
<body>
<div>

    <div id="box">
        <p title='默认样式'>默认样式</p>
        <p title='修改后的样式' class="title">修改后的样式</p>
        <p title='修改后的样式' class="title">修改后的样式</p>
    </div>
</div>
</body>
</html>
